import Vue from 'vue'

// 全局的自定义指令，处理图片加载失败的问题
// 注意：在声明自定义指令的时候，名字中不需要包含 v- 前缀
// 但是在使用的时候，需要添加 v- 前缀
Vue.directive('img-error', {
  // 形参中的 el 是当前指令，所绑定到的元素
  // bind 函数只在元素第一次被解析的时候执行
  bind(el) {
    // 如果图片加载失败了，则会触发 img 元素的 onerror 事件
    el.onerror = function () {
      el.src = require('@/assets/common/bigUserHeader.png')
    }
  },
  // update 会多次执行，只要 DOM 变化了，就会触发 update
  update(el) {
    // 判断元素是否有 src 属性，如果没有，则给一个默认的图片，当作其 src
    if (!el.src) {
      el.src = require('@/assets/common/bigUserHeader.png')
    }
  }
})
